<!DOCTYPE html>
<html lang="zh-cmn-Hans" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/iconfont.css">
	<link rel="stylesheet" href="css/global.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="stylesheet" href="css/styles.css">
	<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
	<script src="js/bootstrap.min.js" charset="UTF-8"></script>
	<script src="js/swiper.min.js" charset="UTF-8"></script>
	<script src="js/global.js" charset="UTF-8"></script>
	<script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script>
	<title>国风汉服</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

	<script src="js/jquery.magnifier.js"></script>
	<script src="js/jquery.zoom.js"></script>

	<script>
		//axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';//给请求头设置默认值
		$(function () {
			new Vue({
				el: "#order_show",
				data: {
					QR_Code:"",
					user:"",
					sums:1,
					address:[],
					goodsinfo:[],
					orderinfo:{
						ids:[],
						nums:[],
						payType:"",
						addressId:1,
						user:""
					}
				},
				methods: {
					order_submit:function(){
						let info =this.orderinfo;
						axios.post('/order/addOrder',info,{headers: {'JWT': localStorage.getItem("JWT")}}).then(r => {
							if (r.data.code == 200) {
								let a=this.orderinfo.payType.toString();
								let user=this.user;
								if(a=="balance"){
									let times=3;
									layer.prompt({title: '输入支付密码并确认', formType: 1}, function(pass, index){
										let password=user.paypwd.toString();
											if(password==pass){
												layer.close(index);
												layer.msg("支付成功",{time: 2000, icon:0});
												location.href="/user/ucenter";
											}else{
												times--;
												layer.msg("密码错误,还有"+times+"次输入机会",{time: 500, icon:2});
											}
											if(times==0){
												layer.confirm('错误次数过多,请在我的订单页面选择其他支付方式',{
													btn:['确认']},function(){
													location.href="/user/ucenter";
												});
												layer.close(index);
											}
									});
								}else{
									let html=this.QR_Code;
									layer.open({
										title : false,
										type: 1,
										skin: 'layui-layer-rim', //加上边框
										area: ['215px', '215px'], //宽高
										content: html
									});
								}
							}else{
								layer.msg("未知错误,请重新登录",{time: 2000, icon:1})
							}
						})
					},
					//隐藏手机号码中间4位
					changePhone:function(){
						for (let regElement of this.address) {
							let newPhone = regElement.phone.replace(regElement.phone.substr(3, 4), "****");
							regElement.phone=newPhone;
						}
					},
					getAdd:function(add){
						this.orderinfo.addressId=add.id*1;
					},
					getPay:function(num){
						if(num==1){
							this.orderinfo.payType=this.$refs.getPay1.value;
						}else if(num==2){
							this.orderinfo.payType=this.$refs.getPay2.value;
						}else if(num==3){
							this.orderinfo.payType=this.$refs.getPay3.value;
						}
					},
					getSums:function(){
						let sums=0;
						for (const goods of this.goodsinfo) {
							sums=sums+goods.num*1*goods.price;
						}
						this.sums=sums+10;
					}
				},
				mounted: function () {
					this.user=JSON.parse(localStorage.getItem("userz"));
					let orderinfos = localStorage.getItem("orderInfos");
					this.QR_Code="<img style='height: 200px;width: 200px;' src='/images/temp/QR-code.jpg' align='middle'>";
					//string转json对象
					let info = JSON.parse(orderinfos);
					this.orderinfo.ids=info.ids;
					this.orderinfo.nums=info.nums;
					this.orderinfo.user=this.user;
					axios.post('/order/initGoods',info,{headers: {'JWT': localStorage.getItem("JWT")}}).then(r => {
						if (r.data.code == 200) {
							this.goodsinfo=r.data.data;
							this.getSums();
						}else{
							layer.msg("未知错误,添加失败",{time: 2000, icon:1})
						}
					}),
					console.log(this.user);
					axios.post('/address/getAll',this.user,{headers: {'JWT': localStorage.getItem("JWT")}}).then(r => {
						if (r.data.code == 200) {
							this.address=r.data.data;
							this.changePhone();
						}else{
							layer.msg("未知错误,获取失败",{time: 2000, icon:1})
						}
					})
				}
			});
		})
	</script>
	<script>
		$(function() {
			$("#header").load("/header.html");
		});
	</script>
</head>
<body>
<div id="header"></div>
	<!-- 顶部tab -->
<!--	<div class="tab-header">
		<div class="inner">
			<div class="pull-left">
				<div class="pull-left">嗨，欢迎来到<span class="cr">{{user.name}}</span></div>
				<a href="agent_level.html">网店代销</a>
				<a href="temp_article/udai_article4.html">帮助中心</a>
			</div>
			<div class="pull-right">
				<a href="login22.html"><span class="cr">登录</span></a>
				<a href="login22.html?p=register">注册</a>
				<a href="udai_welcome222.html">我的U袋</a>
				<a href="udai_order.html">我的订单</a>
				<a href="udai_integral.html">积分平台</a>
			</div>
		</div>
	</div>-->
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="index.html"><img src="images/icons/logo.jpg" alt="XXX" class="cover"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div id="order_show">
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车-确认支付 </div>
				<div class="shop-title">收货地址</div>
				<form action="" class="shopcart-form__box">
					<div class="addr-radio" v-for="add in address">
						<div class="radio-line radio-box active">
							<label class="radio-label ep" :title="add.rname+' '+add.detail">
								<input name="addr" checked="" :value="add.id" autocomplete="off" type="radio" @click="getAdd(add)"><i class="iconfont icon-radio"></i>
								{{add.province}}  {{add.city}}  {{add.area}}  {{add.detail}} {{add.rname}} 收 {{add.phone}}
							</label>
							<p class="default" v-if="add.isdefault=='y'">默认</p>
							<a href="javascript:void(0)" class="default" v-if="add.isdefault=='n'">设为默认</a>
							<a href="udai_address_edit.html" class="edit">修改</a>
						</div>
					</div>
					<div class="add_addr"><a href="udai_address.html">添加新地址</a></div>
					<div class="shop-title">确认订单</div>
					<div class="shop-order__detail">
						<table class="table">
							<thead>
								<tr>
									<th width="120"></th>
									<th width="300">商品信息</th>
									<th width="150">单价</th>
									<th width="200">数量</th>
									<th width="200">运费</th>
									<th width="80">总价</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="goods in goodsinfo">
									<th scope="row"><a href="item_show.html"><div class="img"><img :src="goods.coverPath" alt="" class="cover"></div></a></th>
									<td>
										<div class="name ep3">{{goods.goodsName}}</div>
										<div class="type c9">{{goods.values}}</div>
									</td>
									<td>¥{{goods.price}}</td>
									<td>{{goods.num}}</td>
									<td>¥10.0</td>
									<td>¥{{goods.num*1*goods.price+10}}</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="shop-cart__info clearfix">
						<div class="pull-left text-left">
							<div class="info-line text-nowrap">购买时间：<span class="c6">2017年09月14日 17:31:05</span></div>
							<div class="info-line text-nowrap">交易类型：<span class="c6">担保交易</span></div>
							<div class="info-line text-nowrap">交易号：<span class="c6">1001001830267490496</span></div>
						</div>
						<div class="pull-right text-right">
							<div class="form-group">
								<label for="coupon" class="control-label">优惠券使用：</label>
								<select id="coupon" >
									<option value="-1" selected>- 请选择可使用的优惠券 -</option>
									<option value="1">【满￥20.0元减￥2.0】</option>
									<option value="2">【满￥30.0元减￥2.0】</option>
									<option value="3">【满￥25.0元减￥1.0】</option>
									<option value="4">【满￥10.0元减￥1.5】</option>
									<option value="5">【满￥15.0元减￥1.5】</option>
									<option value="6">【满￥20.0元减￥1.0】</option>
								</select>
							</div>
							<div class="info-line">优惠活动：<span class="c6">无</span></div>
							<div class="info-line">运费：<span class="c6">¥0.00</span></div>
							<div class="info-line"><span class="favour-value">已优惠 ¥2.0</span>合计：<b class="fz18 cr">¥18.0</b></div>
						</div>
					</div>
					<div class="shop-title">确认订单</div>
					<div class="pay-mode__box">
						<div class="radio-line radio-box">
							<label class="radio-label ep">
								<input name="pay-mode" value="balance" autocomplete="off" ref="getPay1" type="radio" v-on:click="getPay(1)"><i class="iconfont icon-radio"></i>
								<span class="fz16">余额支付</span><span class="fz14">{{user.money}}</span>
							</label>
							<div class="pay-value">支付<b class="fz16 cr">18.00</b>元</div>
						</div>
						<div class="radio-line radio-box">
							<label class="radio-label ep">
								<input name="pay-mode" value="alipay" autocomplete="off" ref="getPay2" type="radio" v-on:click="getPay(2)"><i class="iconfont icon-radio"></i>
								<img src="images/icons/alipay.png" alt="支付宝支付">
							</label>
							<div class="pay-value">支付<b class="fz16 cr">18.00</b>元</div>
						</div>
						<div class="radio-line radio-box">
							<label class="radio-label ep">
								<input name="pay-mode" value="wxPay" autocomplete="off" ref="getPay3" type="radio" v-on:click="getPay(3)"><i class="iconfont icon-radio"></i>
								<img src="images/icons/paywechat.png" alt="微信支付">
							</label>
							<div class="pay-value">支付<b class="fz16 cr">18.00</b>元</div>
						</div>
					</div>
					<div class="user-form-group shopcart-submit">
						<button type="button" class="btn" @click="order_submit()">继续支付</button>
					</div>
				</form>
			</div>
		</section>
	</div>
	</div>
	<!-- 右侧菜单 -->
	<div class="right-nav">
		<ul class="r-with-gotop">
			<li class="r-toolbar-item">
				<a href="udai_welcome222.html" class="r-item-hd">
					<i class="iconfont icon-user" data-badge="0"></i>
					<div class="r-tip__box"><span class="r-tip-text">用户中心</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_shopcart.html" class="r-item-hd">
					<i class="iconfont icon-cart"></i>
					<div class="r-tip__box"><span class="r-tip-text">购物车</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="udai_collection.html" class="r-item-hd">
					<i class="iconfont icon-aixin"></i>
					<div class="r-tip__box"><span class="r-tip-text">我的收藏</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="" class="r-item-hd">
					<i class="iconfont icon-liaotian"></i>
					<div class="r-tip__box"><span class="r-tip-text">联系客服</span></div>
				</a>
			</li>
			<li class="r-toolbar-item">
				<a href="issues.html" class="r-item-hd">
					<i class="iconfont icon-liuyan"></i>
					<div class="r-tip__box"><span class="r-tip-text">留言反馈</span></div>
				</a>
			</li>
			<li class="r-toolbar-item to-top">
				<i class="iconfont icon-top"></i>
				<div class="r-tip__box"><span class="r-tip-text">返回顶部</span></div>
			</li>
		</ul>
	</div>
	<script>
		$(document).ready(function(){
		$(this).on('change','input',function() {
			$(this).parents('.radio-box').addClass('active').siblings().removeClass('active');
		})
		});
		//$(document).ready(function(){ $('.to-top').toTop({position:false}) });
		$('#coupon').bind('change',function() {
			console.log($(this).val());
		});
	</script>
	<!-- 底部信息 -->
	<div class="footer">
		<div class="footer-tags">
			<div class="tags-box inner">
				<div class="tag-div">
					<img src="images/icons/footer_1.gif" alt="厂家直供">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_2.gif" alt="一件代发">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_3.gif" alt="美工活动支持">
				</div>
				<div class="tag-div">
					<img src="images/icons/footer_4.gif" alt="信誉认证">
				</div>
			</div>
		</div>
		<div class="footer-links inner">
			<dl>
				<dt>XXX</dt>
				<a href="temp_article/udai_article10.html"><dd>企业简介</dd></a>
				<a href="temp_article/udai_article11.html"><dd>加入U袋</dd></a>
				<a href="temp_article/udai_article12.html"><dd>隐私说明</dd></a>
			</dl>
			<dl>
				<dt>服务中心</dt>
				<a href="temp_article/udai_article1.html"><dd>售后服务</dd></a>
				<a href="temp_article/udai_article2.html"><dd>配送服务</dd></a>
				<a href="temp_article/udai_article3.html"><dd>用户协议</dd></a>
				<a href="temp_article/udai_article4.html"><dd>常见问题</dd></a>
			</dl>
			<dl>
				<dt>新手上路</dt>
				<a href="temp_article/udai_article5.html"><dd>如何成为代理商</dd></a>
				<a href="temp_article/udai_article6.html"><dd>代销商上架教程</dd></a>
				<a href="temp_article/udai_article7.html"><dd>分销商常见问题</dd></a>
				<a href="temp_article/udai_article8.html"><dd>付款账户</dd></a>
			</dl>
		</div>
		<div class="copy-box clearfix">
			<ul class="copy-links">
				<a href="agent_level.html"><li>网店代销</li></a>
				<a href="class_room.html"><li>U袋学堂</li></a>
				<a href="udai_about.html"><li>联系我们</li></a>
				<a href="temp_article/udai_article10.html"><li>企业简介</li></a>
				<a href="temp_article/udai_article5.html"><li>新手上路</li></a>
			</ul>
			<!-- 版权 -->
			<p class="copyright">
				© 2005-2017 XXX 版权所有，并保留所有权利<br>
				ICP备案证书号：闽ICP备XXX号-2&nbsp;&nbsp;&nbsp;&nbsp;福建省宁德市XXX&nbsp;&nbsp;&nbsp;&nbsp;Tel: XXX&nbsp;&nbsp;&nbsp;&nbsp;E-mail: XXX@qq.com
			</p>
		</div>
</div>
</body>
</html>